import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, ScrollView} from 'react-native';
import {
    Flex,
    WingBlank,
    WhiteSpace,
    List,
    DatePicker,
    Provider,
    Item,
} from '@ant-design/react-native';

export default class Statistical extends React.Component {
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        this.onChange = (value) => {
            this.setState({value});
        };
        // 设置当前组件的属性
        this.state = {
            value: undefined,
            count: 1000,
            countone: 300,
            counttwo: 200,
            countthree: 500,
        };
    }

    render() {
        return (
            <>
                <Flex direction="row" justify="around" style={styles.topview}>
                    <Text style={styles.titback}>本小区</Text>
                    <Text style={styles.titback}>其他小区</Text>
                </Flex>
                <View style={{width: '50%', marginLeft: '50%'}}>
                    <List>
                        <DatePicker
                            value={this.state.value}
                            mode="date"
                            defaultDate={new Date()}
                            minDate={new Date(2015, 7, 6)}
                            maxDate={new Date(2026, 11, 3)}
                            onChange={this.onChange}
                            format="YYYY-MM-DD">
                            <List.Item arrow="horizontal">选择时间</List.Item>
                        </DatePicker>
                    </List>
                </View>
                <WingBlank>
                    <Flex>
                        <Text>总客户：{this.state.count}</Text>
                    </Flex>
                    <Flex>
                        <Text>今日客户：{this.state.countone}</Text>
                    </Flex>
                    <Flex>
                        <Text>昨日客户：{this.state.counttwo}</Text>
                    </Flex>
                    <Flex>
                        <Text>前日客户：{this.state.countthree}</Text>
                    </Flex>
                </WingBlank>
            </>
        );
    }
}
const styles = StyleSheet.create({
    topview: {
        marginLeft: '1%',
        marginRight: '1%',
        paddingTop: '3%',
        paddingBottom: '3%',
        borderWidth: 0.3,
    },
    titback: {
        fontSize: 20,
    },
});
